<!--号源组-->
<template>
  <div
    class="appo-item-box flex flex-row align-center"
    :class="{
      appoPadding: appoRepair
    }"
  >
    <!-- 每个item前面的checkbox statusTemplate === 'template'：如果为模板的时候，checkbox都显示 -->
    <el-checkbox
      class="mar-r-3"
      size="medium"
      v-if="(isEdit && checkboxShow && (!appoDisable || allCkb)) || statusTemplate === 'template'"
      v-permission="['YJYY10001001002', 'YJYY10008002001']"
      v-model="sItem.isChecked"
      @change="checkBoxChange">
    </el-checkbox>
    <!-- <div v-if="(isEdit && checkboxShow && (!appoDisable || allCkb)) || statusTemplate === 'template'">{{sItem.isChecked?'t':'f'}}</div> -->
    <!-- <div v-else>n</div> -->
    <div
      v-if="itemSize === 'big'"
      class="appo-item flex-1"
      :class="[
        appoClassFlr(sItem),
        checked ? 'appo-active':'',
        actionCheckIds && sItem.id && actionCheckIds.indexOf(sItem.id+'')>=0? 'appo-lock':''
      ]"
      @click.stop="appoClick({sidebarIndex, scheduleIndex, appoIndex, sItem})"
      @mouseenter.stop="appoMouseOver(sItem,$event)"
      @mouseleave="appoMouseLeave"
    >
      <div class="appo-item-flex">
        <div class="time">
          <!-- <span v-if="sItem.isBad" style="color: #f00;">修正时间</span>
          <span v-else>{{sItem.beginTime+'-'+sItem.endTime}}</span> -->
          <span>{{sItem.beginTime+'-'+sItem.endTime}}</span>
        </div>
        <div class="info">
          <div class="source">
            <span class="ky-mr10">始:{{sItem.initialNum}}</span>
            <font>
              <!-- callNum已预约数 -->
              号:{{sItem.callNum ? sItem.totalNum*1 - sItem.callNum*1 : sItem.totalNum}}
              <font v-if="statusTemplate === 'template' && sItem.recommendflag" class="fc_red" title="平均数">| {{sItem.avgNum}}</font>
            </font>
          </div>
        </div>
      </div>
      <i
        class="el-icon-close appo-del"
        v-if="(!appoDisable && isEdit ) || statusTemplate === 'template'"
        v-permission="['YJYY10001001002', 'YJYY10008002001']"
        @click.stop="appoDel({sidebarIndex, scheduleIndex, appoIndex, sItem})"
      ></i>
      <span
        class="appo-tag"
        :class="appoTagTextColorClass(sItem)"
      >{{appoStatusLabel(sItem)}}<i
        class="appo_color_block"
        :style="{
          backgroundColor: sItem.color?sItem.color:''
        }"
        title="号源类型的特定颜色"></i></span>
      <el-button size="mini" id="info-button" v-show="appoFilterShow" @click.stop="openSourceInfoClick">锁定</el-button>
    </div>
    <!-- item类型判断 big还是默认 v-else 默认 -->
    <div
      v-else
      class="appo-item appo-item-mini appo-tag-block flex-1"
      :class="[
        appoClassFlr(sItem),
        checked ? 'appo-active':'',
        actionCheckIds && sItem.id && actionCheckIds.indexOf(sItem.id+'')>=0? 'appo-lock':'',
      ]"
      @click.stop="appoClick({sidebarIndex, scheduleIndex, appoIndex, sItem})"
      @mouseenter.stop="appoMouseOver"
      @mouseleave="appoMouseLeave"
      @contextmenu.prevent.stop="openMenu"
    >
      <div class="appo-item-flex">
        <div class="time">
          <!-- <span v-if="sItem.isBad" style="color: #f00;">修正时间</span>
          <span v-else>{{sItem.beginTime+'-'+sItem.endTime}}</span> -->
          <span>{{sItem.beginTime+'-'+sItem.endTime}}</span>
        </div>
        <div class="info">
          <div class="source">
            <span>始:{{sItem.initialNum}}</span>
            <font>
              号:{{sItem.callNum ? sItem.totalNum*1 - sItem.callNum*1 : sItem.totalNum}}
              <!-- {{sItem.totalNum+'-'+sItem.callNum}} -->
              <font v-if="statusTemplate === 'template' && sItem.recommendflag" class="fc_red" title="平均数">|{{sItem.callNum}}</font>
            </font>
          </div>
        </div>
      </div>
      <span
        class="appo-tag appo-tag-mini"
        :class="appoTagTextColorClass(sItem)"
      >{{appoStatusLabel(sItem)}}<i
        class="appo_color_block"
        :style="{
          backgroundColor: sItem.color?sItem.color:''
        }"
        title="号源类型的特定颜色"></i></span>
      <!-- 删除按钮 -->
      <i
        class="el-icon-close appo-del"
        v-if="(!appoDisable && isEdit) || statusTemplate === 'template'"
        v-permission="['YJYY10001001002', 'YJYY10008002001']"
        @click.stop="appoDel({sidebarIndex, scheduleIndex, appoIndex, sItem})"
      ></i>
      <!-- <el-checkbox
        class="appo-check"
        size="medium"
        v-show="(!appoDisable && isEdit) || statusTemplate === 'template' || checked"
        @change="checkBoxChange"
        v-model="sItem.isChecked">
      </el-checkbox> -->
      <el-button size="mini" id="info-button" v-show="appoFilterShow" @click.stop="openSourceInfoClick">锁定</el-button>
    </div>
    <div
      class="menu_container"
      v-if="menuconfig.visible"
      :style="{
        left: menuconfig.left,
        top: menuconfig.top
      }"
    >
      <li>菜单一</li>
      <li @click="closeMenu">菜单二</li>
    </div>
  </div>
</template>

<script>
import { setLocalStorage } from '@/utils/localStorage'
import { getDeptRoomByKey } from '@/utils/utils'
export default {
  name: 'FsItem',
  // checkedAllShow && isEdit && checkboxShow
  props: {
    overdue: Boolean,
    checkboxShow: Boolean,
    allCkb: {
      type: Boolean,
      default: false
    },
    itemSize: {
      type: String,
      default: 'mini'
    },
    sItem: {
      type: Object,
      default: () => {}
    },
    appoDisable: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    // 是否可编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否单格排序
    appoRepair: {
      type: Boolean,
      default: false
    },
    // 模版状态
    statusTemplate: {
      type: String,
      default: 'schedule'
    },
    // 选中id
    actionCheckIds: {
      type: Array,
      default: () => []
    },
    // 班次索引，0-1-2三个班次
    sidebarIndex: {
      type: Number,
      default: -1
    },
    // 星期索引，星期几0-1-2-3-4-5-6
    scheduleIndex: {
      type: Number,
      default: -1
    },
    // 号源索引，当前班次中的第几个
    appoIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      appoFilterShow: false, // 是否显示锁定按钮
      menuconfig: {
        left: 0,
        top: 0,
        visible: false
      }
    }
  },
  computed: {
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    isShowUpdate() {
      return this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.isShowUpdate
    }
  },
  // watch: {
  //   'sItem.isChecked': {
  //     handler(newVal, oldVal) {
  //       // // console.log('sItem.isChecked changed')
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  created() {
    // // // console.log('#######itemSize3333333333333333created', this.itemSize)
  },
  mounted() {
    // console.log('overdue', this.overdue)
    // // console.log('checkboxShow_in_item', this.checkboxShow)
    // // console.log('statusTemplate', this.statusTemplate)
    // // // console.log('号源索引', this.appoIndex)
    // // // console.log('checkboxShow', this.checkboxShow)
    // // // console.log('sItem', this.sItem)
    // // // console.log('#######itemSize3333333333333333mounted', this.itemSize)
  },
  methods: {
    checkBoxChange(data) {
      // // console.log('checkBoxChange_sItem', this.sItem)
      this.$emit('checkBoxChange', { isChecked: data, scheduleIndex: this.scheduleIndex, sidebarIndex: this.sidebarIndex, appoIndex: this.appoIndex })
    },
    appoClick(data) {
      // // console.log('点击后打印的data>>>', data)
      setLocalStorage('sidebarIndex', data.sidebarIndex)
      this.$emit('appoClick', data)
    },
    // 删除，排班号源
    appoDel(data) {
      // {sidebarIndex, appo, scheduleIndex, timeItem, timeIndex}
      this.$emit('appoDel', data)
    },
    // 锁定触发
    openSourceInfoClick() {
      this.$emit('openSourceInfoClick', this.sItem)
    },
    // 鼠标移入，显示锁定按钮
    appoMouseOver() {
      if (this.statusTemplate !== 'template' && this.sItem.id) {
        this.appoFilterShow = true
      }
    },
    // 鼠标移出
    appoMouseLeave() {
      this.appoFilterShow = false
    },
    appoClassFlr(row) {
      const isEditeClass = '' // this.isEdit ? '' : 'cannotEdit'
      const _statusClass = this.appoStatusFlr(row)
      const _checkClass = this.appoCheckFlr(row)

      return _statusClass + ' ' + isEditeClass + ' ' + _checkClass
    },
    // 根据号源状态,返回类
    appoStatusFlr(row) {
      const val = row.appointmentStatus
      // // // console.log('==val==', val)
      if (!row.id) {
        return 'appo-item-grey'
      } else if (this.statusTemplate === 'template') {
        return row.status === '启用' ? 'appo-item-default' : 'appo-item-danger'
      }
      switch (val) {
        case '':
          return 'appo-item-grey'
        case '节假日':
          return 'appo-item-danger'
        case '暂停预约':
        case '设备故障':
          return 'appo-item-warn'
        case '正常预约':
          return 'appo-item-success'
        default:
          return 'appo-item-default'
      }
    },
    // 根据号源状态,返回类
    appoTagTextColorClass(row) {
      let resultLabel = this.appoStatusLabel(row)
      switch (resultLabel) {
        case '住':
        case '门':
        case '体':
          return 'tag_text_clr'
        default:
          return ''
      }
    },
    // 返回号源显示标签
    appoStatusLabel(row) {
      // console.log('appoStatusLabel=>看这里', row)
      let resultLabel = ''
      // 判断是否为模板
      if (this.statusTemplate === 'template') {
        resultLabel = row.status ? row.status.slice(0, 1) : ''
      } else {
        switch (row.appointmentStatus) {
          case '正常预约':
            resultLabel = '预'
            break
          case '计划排班':
            resultLabel = '排'
            break
          case '设备故障':
            resultLabel = '故'
            break
          case '节假日':
            resultLabel = '假'
            break
          case '暂停预约':
            resultLabel = '停'
            break
          default:
            resultLabel = '新'
            break
        }
      }
      if (this.isShowUpdate) {
        const deptRoom = getDeptRoomByKey()
        const dep = deptRoom && deptRoom.length && deptRoom[1].split('-')[2]
        // console.log('dep', dep)
        if (dep && dep == '内窥镜') {
          // 判断过滤条件
          if (row.appointmentFilters.length > 0) {
            const _filters = row.appointmentFilters
            _filters.forEach(item => {
              if (item.parametersType === 'LCYY' && item.parametersValues.indexOf('临床预约') >= 0) {
                resultLabel = '临'
              } else if (item.parametersType === 'VIP' && item.parametersValues.indexOf('转诊预约') >= 0) {
                resultLabel = '转'
              }
            })
          }
        }
      }
      // 判断过滤条件
      // if (row.appointmentFilters.length > 0) {
      //   const _filters = row.appointmentFilters
      //   _filters.forEach(item => {
      //     if (item.parametersType === 'pat_type' && item.parametersValues.indexOf('住院') >= 0) {
      //       resultLabel = '住'
      //     } else if (item.parametersType === 'pat_type' && item.parametersValues.indexOf('门诊') >= 0) {
      //       resultLabel = '门'
      //     } else if (item.parametersType === 'pat_type' && item.parametersValues.indexOf('体检') >= 0) {
      //       resultLabel = '体'
      //     }
      //     if (item.parametersType === 'pat_type' && item.parametersValues.indexOf('住院') >= 0 && item.parametersValues.indexOf('门诊') >= 0 && item.parametersValues.indexOf('体检') >= 0) {
      //       resultLabel = '门'
      //     }
      //   })
      // }

      return resultLabel
    },
    // 根据号源状态,返回类
    appoCheckFlr(row) {
      const _filters = row.appointmentFilters
      let checkClass = ''
      if (_filters.length > 0) {
        _filters.forEach(item => {
          if (item.parametersType === 'CheckType' && item.parametersValues.indexOf('增强') >= 0) {
            checkClass = 'check_zq'
          }
        })
      }
      return checkClass
    },
    // 时段右键点击触发效果
    openMenu(e) {
      // // // console.log(e)
      let x = e.pageX
      let y = e.pageY
      this.menuconfig.left = x
      this.menuconfig.top = y
      // this.menuconfig.visible = true
    },
    closeMenu() {
      this.menuconfig.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/fullschedule.scss';
.appo-item-box{
  height: 100%;
}
.appoPadding{
  margin: 10px 0;
}
.menu_container{
  background-color: #fff;
  padding: 10px 0;
  border-radius: 3px;
  position: fixed;
  z-index: 100000;
  list-style-type: none;
  font-size: 12px;
  color: #333;
  box-shadow: 0 3px 5px rgba(125,125,125, 0.5);
  li{
    padding: 5px 20px;
    cursor: pointer;
    &:hover{
      background-color: #f00;
      color: #fff;
    }
  }
}
</style>
